<template>
  <div :class="wrapClasses">
    <slot></slot>
  </div>
</template>

<script>
const prefix = 'sh-steps'

export default {
  name: 'Steps',
  props: {
    direction: {
      type: String,
      default: 'horizontal'
    },
    active: {
      type: [String, Number],
      default: 1
    },
    status: {
      type: String,
      default: 'process'
    },
    timer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      prefix: prefix
    }
  },
  computed: {
    wrapClasses () {
      return [
        `${prefix}`,
        {
          [`${prefix}-vertical`]: this.direction === 'vertical',
          [`${prefix}-horizontal`]: this.direction === 'horizontal'
        }
      ]
    }
  },
  mounted () {
    this.setChildProps(true)
    this.updateCurrent(true)
  },
  methods: {
    setChildProps (isInit) {
      let active = this.active

      this.$children.forEach((child, i) => {
        let num = i + 1
        child.stepNum = num
        child.isTimer = this.timer
        // if (!(isInit && child.currentStatus)) {
        if (num === active) {
          child.currentStatus = 'process'
        } else if (num < active) {
          child.currentStatus = 'finish'
        } else {
          child.currentStatus = 'wait'
        }
        // }
      })
    },
    updateCurrent (isInit) {
      if (this.active < 0 || this.active >= this.$children.length) {
        return
      }

      this.$children[this.active - 1].currentStatus = this.status
    },
    selectStep (stepNum) {
      this.$emit('select-step', stepNum)
      if (!this.timer) {
        return
      }
      this.$children.forEach((item, index) => {
        if ((index + 1) === stepNum) {
          item.currentStatus = 'finish'
        } else {
          item.currentStatus = 'wait'
        }
      })
    }

  },
  watch: {
    active () {
      this.setChildProps()
    },
    status () {
      this.updateCurrent()
    }
  }

}
</script>

<style>

</style>
